import Tabs, { TabsProps } from '@/components/Tabs';
import { getDeviceCascader } from '@/utils/formatterTree';
import { useIntl } from '@umijs/max';
import { Radio, Space } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import Chart from './component/Chart';
import List, { ToolBarRender } from './component/List';

const Index: React.FC = () => {
  const intl = useIntl();
  const [deviceInfo, setDeviceInfo] = useState([]);
  const listRef = useRef(null);
  useEffect(() => {
    getDeviceCascader(false, undefined, ['AREA', 'BMS']).then((res) => {
      setDeviceInfo(res);
    });
  }, []);
  const [showType, setShowType] = useState('2');

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: intl.formatMessage({ id: 'statistics.analyze.day' }),
      children:
        showType === '1' ? (
          <List dateType={1} deviceInfo={deviceInfo} ref={listRef} />
        ) : (
          <Chart dateType={1} deviceInfo={deviceInfo} />
        ),
    },
    {
      key: '2',
      label: intl.formatMessage({ id: 'statistics.analyze.month' }),
      children:
        showType === '1' ? (
          <List dateType={2} deviceInfo={deviceInfo} ref={listRef} />
        ) : (
          <Chart dateType={2} deviceInfo={deviceInfo} />
        ),
    },
    {
      key: '3',
      label: intl.formatMessage({ id: 'statistics.analyze.year' }),
      children:
        showType === '1' ? (
          <List dateType={3} deviceInfo={deviceInfo} ref={listRef} />
        ) : (
          <Chart dateType={3} deviceInfo={deviceInfo} />
        ),
    },
  ];

  return (
    <div>
      <Tabs
        items={items}
        destroyInactiveTabPane={true}
        tabBarExtraContent={
          <Space>
            <Radio.Group
              value={showType}
              buttonStyle="solid"
              onChange={(event) => {
                setShowType(event?.target.value);
              }}
              className="global-group-radio-button"
            >
              <Radio.Button value="1">
                {intl.formatMessage({ id: 'statistics.common.list' })}
              </Radio.Button>
              <Radio.Button value="2">
                {intl.formatMessage({ id: 'statistics.common.chart' })}
              </Radio.Button>
            </Radio.Group>
            {showType === '1' && <ToolBarRender tableRef={listRef} />}
          </Space>
        }
      />
    </div>
  );
};
export default Index;
